<template>
	<view class="page">
		<u-grid :border="false" :col="2">
			<u-grid-item v-for="(item,index) in list" :key="index">
				<view class="item" @click="toEval(item)">
					<view class="header">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="address">{{ item.city }}</view>
						<view class="tags flex_r_between">
							<text></text>
							<image :src="$util.prefix('circle/playCircle.png')" v-if="item.video"></image>
							<image :src="$util.prefix('circle/home_image.png')" v-else></image>
						</view>
					</view>

					<view class="name hidden_2">
						{{ item.content || '' }}
					</view>

					<view class="user flex_r_between">
						<view class="left flex_center">
							<image :src="item.avatar" mode="aspectFill"></image>
							<text>{{ item.nickname }}</text>
						</view>
						<view class="right flex_r_around">
							<text>评论</text>
						</view>
					</view>

				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		name: 'operationEval',
		props: {
			circle_id: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				list: [],
				page: 1,
				total: 1
			}
		},
		methods: {
			toEval(item) {
				this.$util.toUrl(`/pages/circle/operationDetail?id=${item.id}&circle_id=${this.circle_id}`);
			},

			getList() {
				this.$get('/article/getCircleArticle', {
					circle_id: this.circle_id,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			reachBottom() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},
		},

		created() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-grid-item--hover-class {
		opacity: 1;
	}


	.page {
		padding: 16rpx 8rpx;
		min-height: 100vh;
	}

	.item {
		height: 600rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 0 8rpx 16rpx;

		.header {
			width: 352rpx;
			height: 400rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 352rpx;
				height: 400rpx;
			}

			.address {
				background: rgba(0, 0, 0, 0.4);
				border-radius: 8rpx;
				padding: 2rpx 6rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				position: absolute;
				top: 20rpx;
				left: 24rpx;
			}


			.tags {
				width: 352rpx;
				padding: 12rpx 16rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

				text {
					flex: 1;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

		.name {
			margin: 24rpx 16rpx 12rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}

		.user {
			margin: 0 16rpx;

			.left {
				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 24rpx;
					color: #666666;
				}

			}

			.right {
				width: 96rpx;
				height: 40rpx;
				border-radius: 20rpx;
				border: 2rpx solid #FD2A53;
				font-size: 24rpx;
				color: #FD2A53;
			}
		}

	}
</style>